<template>
  <div class="parent-login">
    <div class="login-top-nav">
      <div class="login-top-nav-content">
        <img class="login-top-logo" src="../../assets/images/logo-login.png"/>
        <p class="login-top-welcome">您好，欢迎来急先蜂!</p>
      </div>
    </div>
    <div class="login-form-input">
      <img class="login-form-input-logo" src="../../assets/images/login-bg.gif"/>
      <ul class="login-form-input-ul" v-loading="loading">
        <li class="form-title">急先蜂代理平台</li>
        <li></li>
        <li class="form-pwsd-phone">
          <input placeholder="请输入登录手机号" v-model="phoneNum">
        </li>
        <li class="form-pwsd-phone">
          <input placeholder="请输入登录密码" v-model="password" type="password">
        </li>
        <li class="form-pwsd-check">
          <input placeholder="请输入安全码" v-model="checkCode">
          <p v-show="!isShowLeftTime" @click="obtainCheckCode()">获取安全码</p>
          <p v-show="isShowLeftTime">{{leftTime}} s</p>
        </li>
        <li class="form-submit-btn" @click="checkLogin()">
          登录
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
  import md5 from "js-md5"
  import {autoLogout} from "../../constant/autoLogout"
  export default {
    data() {
      return {
        checkCode: "",
        phoneNum: "",
        password: "",
        leftTime: "",
        isShowLeftTime: false,
        loading: false
      }
    },
    components: {},
    mounted() {
    },
    activated() {
    },
    deactivated() {
      this.$destroy(true);
    },
    methods: {
      //检测登录的参数
      checkLogin() {
        if (!this.$utils.isPhoneNum(this.phoneNum)) {
          this.$message({
            message: '手机号不正确!',
            type: 'warning'
          });
          return;
        }
        if (this.$utils.isEmpty(this.password)) {
          this.$message({
            message: '密码未输入!',
            type: 'warning'
          });
          return;
        }
        if (this.$utils.isEmpty(this.checkCode)) {
          this.$message({
            message: '验证码未输入!',
            type: 'warning'
          });
          return;
        }
        this.requestLogin();
      },

      //请求登录
      requestLogin() {
        let parameter = new URLSearchParams();
        parameter.append("action", "base_agent_login_mobile");
        parameter.append("uservalue", this.phoneNum);
        parameter.append("password", md5(this.password));
        parameter.append("activecode", this.checkCode);
        let that = this;
        that.loading = true;
        this.$http.requestData(that, parameter, -1, function (data) {
          autoLogout.StartPoint();
          that.$utils.setCookie(that.$keys.USER_ID,data.userid,0.5*60 * 1000, "/");
          that.$utils.setCookie(that.$keys.USER_KEY,data.userkey,0.5*60 * 1000, "/");
          that.$utils.setCookie('phoneNum', that.phoneNum,0.5*60 * 1000, "/");
          that.requestUserView();
        });
      },


      //获取代理商个人信息
      requestUserView() {
        let parameter = new URLSearchParams();
        parameter.append("action", "base_user_view");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          that.$utils.setCookie(that.$keys.AGENT_ID, data.agentid,0.5*60 * 1000, "/");
          that.requestBaseSysteminfo();
        });
      },

      //获取系统配置信息
      requestBaseSysteminfo() {
        let parameter = new URLSearchParams();
        parameter.append("action", "base_system_info");
        let that = this;
        that.loading = true;
        this.$http.requestAuthData(that, parameter, function (data) {
          localStorage.setItem("systerm_info", JSON.stringify(data));
          that.$message({message: '登录成功!', type: 'success'});
          that.$store.commit("chageLoginState");
          that.$router.replace("/");
        });
      },

      //获取登陆验证码
      obtainCheckCode() {
        if (!this.$utils.isPhoneNum(this.phoneNum)) {
          this.$message({
            message: '手机号不正确!',
            type: 'warning'
          });
          return;
        }
        let parameter = new URLSearchParams();
        parameter.append("action", "base_activecode_send_mobile");
        parameter.append("activetarget", this.phoneNum);
        let that = this;
        that.loading = true;
        this.$http.requestData(that, parameter, -1, function (data) {
          that.$message({message: '验证码已发送!', type: 'success'});
          that.setLeftTime();
        });
      },

      // 设置剩余时间
      setLeftTime() {
        this.isShowLeftTime = true;
        this.leftTime = 60;
        let that = this;
        let interval = setInterval(function () {
          if (that.leftTime === 0) {
            that.isShowLeftTime = false;
            clearInterval(interval);
          }
          that.leftTime--;
        }, 1 * 1000);
      },
    }
  }
</script>

<style lang="scss" scoped="" type="text/scss" src="../../assets/style/login.scss">
</style>

